<template>
	<view class="virtual-waterfall-container">
		<Suspense>
			<fs-virtual-water-fall :request="req" :gap="15" :column="2" :request-size="30">
				<template #item="{ item }">
					<view style="border: 1px solid #ce1515">
						<u-image width="100%" :height="item.imgHeight" :src="item.item.src" />
					</view>
				</template>
			</fs-virtual-water-fall>
		</Suspense>
	</view>
</template>

<script setup lang="ts">
	import FsVirtualWaterFall from '@/components/waterfall/waterfall.vue';

	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const req = async (page : number, pageSize : number) => {
		const rep = [
			{
				code: 0,
				data: {
					count: 61912,
					rows: [
						{
							picture_id: '62242914',
							title: 'Night Elves',
							width: 849,
							height: 1500,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/62242914_p0_master1200.jpg',
						},
						{
							picture_id: '75726416',
							title: '微笑',
							width: 758,
							height: 786,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/22/38/75726416_p0_master1200.jpg',
						},
						{
							picture_id: '48456097',
							title: '啊!',
							width: 627,
							height: 885,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg',
						},
						{
							picture_id: '82987489',
							title: '2020',
							width: 1500,
							height: 2354,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/29/09/22/82987489_p0_master1200.jpg',
						},
						{
							picture_id: '60593260',
							title: '马修酱',
							width: 750,
							height: 1200,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/40/60593260_p0_master1200.jpg',
						},
						{
							picture_id: '83088255',
							title: 'Grow',
							width: 1035,
							height: 1200,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/03/04/22/06/83088255_p0_master1200.jpg',
						},
						{
							picture_id: '56402703',
							title: 'Color Girl',
							width: 1195,
							height: 1600,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/18/56402703_p0_master1200.jpg',
						},
						{
							picture_id: '68198008',
							title: '豆腐薄饼',
							width: 900,
							height: 1440,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/68198008_p0_master1200.jpg',
						},
						{
							picture_id: '83314745',
							title: '爱丽丝 &middot; 辛塞西斯 &middot; 萨蒂',
							width: 1240,
							height: 2089,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/31/83314745_p0_master1200.jpg',
						},
						{
							picture_id: '61524931',
							title: '脚底',
							width: 1000,
							height: 701,
							regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/10/11/11/58/61524931_p0_master1200.jpg',
						},
					],
				},
				message: 'ok',
			},
		];

		const processedRows = rep[0].data.rows.map((item) => ({
			id: item.picture_id,
			title: item.title,
			width: item.width,
			height: item.height,
			src: item.regular_url,
		}));
		return {
			total: rep[0].data.count,
			list: processedRows,
		};
	};
</script>

<style scoped lang="scss">
	.virtual-waterfall-container {
		width: 100%;
		height: 100%;
	}

	.test-item {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		animation: identifier 0.25s; // 添加动画，使其出现时更加丝滑
	}

	@keyframes identifier {
		from {
			opacity: 0;
			transform: translateY(200px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>